<template>
    <div class="container container_form_preview">
        <div class="content">
            <!-- cont -->
            <div
                class="content_main"
                v-for="(item,index) in form_config_with_data"
                :key="index"
            >
                <!-- 单行文本 -->
                <div
                    class="content_text_list"
                    v-if=" item.type === 1 "
                >
                    <p class="content_head" >{{ item.title }}</p>
                    <el-input
                        placeholder="请输入内容"
                        size="small"
                        v-model="item.default.value"
                        :disabled="true"
                    />
                </div>

                <!-- 多行文本 -->
                <div
                    class="content_text_list"
                    v-if=" item.type === 6 "
                >
                    <p class="content_head" >{{ item.title }}</p>
                    <el-input
                        type="textarea"
                        autosize
                        placeholder="请输入内容"
                        v-model="item.default.value"
                        :disabled="true"
                    />
                </div>

                <!-- 单选 -->
                <div
                    class="content_radio_list"
                    v-if=" item.type == 2 "
                >
                    <p class="content_head">{{ item.title }}</p>
                    <div
                        class="content_radio"
                        v-for="(itm,idx) in item.options"
                        :key="idx"
                    >
                        <div v-if="itm.option_type == 1">
                            <el-radio
                                v-model="item.default.value"
                                :label="itm.value"
                                class="content_radio_text"
                                :disabled="true"
                            >{{ itm.title }}</el-radio>
                        </div>
                        <div
                            v-if="itm.option_type == 2"
                            class="content_raiod_other"
                        >
                            <el-radio
                                v-model="item.default.value"
                                :label="itm.value"
                                class="content_radio_text"
                                :disabled="true"
                            >{{ itm.title }}</el-radio>
                            <input
                                type="text"
                                class="content_radio_input"
                                v-model="itm.default_edit_content"
                            >
                        </div>
                    </div>
                </div>

                <!-- 多选 -->
                <div
                    class="content_radio_list"
                    v-if=" item.type == 3 "
                >
                    <p class="content_head">{{ item.title }}</p>
                    <div
                        class="content_radio"
                        v-for="(itm,idx) in item.options"
                        :key="idx"
                    >
                        <div v-if="itm.option_type == 1">
                            <el-checkbox
                                v-model="checkAnswer"
                                :label="itm.value"
                                class="content_radio_text"
                                :disabled="true"
                            >{{ itm.title }}</el-checkbox>
                        </div>
                        <div
                            v-if="itm.option_type == 2"
                            class="content_raiod_other"
                        >
                            <el-checkbox
                                v-model="checkAnswer"
                                :label="itm.value"
                                class="content_radio_text"
                                :disabled="true"
                            >{{ itm.title }}</el-checkbox>
                            <input
                                type="text"
                                class="content_checbox_input"
                                v-model="itm.default_edit_content"
                            >
                        </div>
                    </div>
                </div>

                <!-- 图片 -->
                <div
                    class="content_imglist"
                    v-if=" item.type == 8 "
                >
                    <p class="content_head" >{{ item.title }}</p>
                    <img
                        v-if="item.default.value !== '' "
                        :src="item.default.value"
                        class="content_image"
                        :style="{'pointerEvents': 'none'}"
                    >
                    <el-upload
                        action="https://jsonplaceholder.typicode.com/posts/"
                        list-type="picture-card"
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove"
                        :limit="1"
                        :http-request="e=> {fnUploadImageOfCustomerLogo(e)}"
                        v-if="item.default.value == '' "
                        :style="{'pointerEvents': 'none'}"
                        :disabled="true"
                    >
                        <div :style="{height: '146px'}">
                            <img
                                src="http://cdn.zsdx.cn/wei/images/hire/home/camera.png"
                                class="content_camera"
                            >
                            <p
                                class="content_camera_text"
                            >暂无图片</p>
                        </div>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img
                            width="100%"
                            :src="dialogImageUrl"
                        >
                    </el-dialog>
                </div>
            </div>

            <!-- back -->
            <el-button
                type="primary"
                class="el_back_foot"
                size="small"
                @click="()=>{
                    this.$router.push({
                        name: 'workTaskSubmit'
                    })
                }"
            >
                返回
            </el-button>
        </div>
    </div>
</template>

<script>
/**
 * @param   {Array}         list                    //表单数据
 * @param   {String}        dialogImageUrl          //图片url
 * @param   {String}        qrcode                  //上传图片链接
 * @param   {String}        form_config_with_data   //查看提交数据
 * @param   {Array}         checkAnswer             //多选填答案
 */
export default {
    data () {
        return {
            list: [],
            dialogImageUrl: '',
            qrcode: '',
            dialogVisible: false,
            form_config_with_data: [],
            checkAnswer: [],
            id: ''
        };
    },
    created () {
        let query = this.$route.query;

        if(query.id) {
            this.id = query.id;
        }
        this.getData();
    },
    /**
     * 监听预览表单时是否上传图片,隐藏上传框
     */
    watch: {
        qrcode (val) {
            if (val !== undefined) {
                document.querySelector('.container_form_preview .el-upload--picture-card').style.display = 'none';
            }
        }
    },
    mounted () {
        this.$store.commit('SET_HEADER', [{ title: "APP后台"},{title: '工作'},{title: '远程任务'},{title: '预览表单'}]);
    },
    methods: {
        /**
         * 获取表单数据
         */
        getData () {
            this.$post('/student/custom_form_data%5Cget',{
                id: this.id
            },resp=>{
                if (resp.code == 1) {
                    this.form_config_with_data = resp.data.form_config_with_data;

                    //获取多选填答案
                    this.form_config_with_data.map(item=>{
                        if (item.type == 3) {
                            item.default.value.map(itm=>{
                                this.checkAnswer.push(itm.value);
                            });
                        }
                        return;
                    });
                } else if (resp.code == 0) {
                    this.$message({
                        type: 'waring',
                        message: resp.msg
                    });
                }
            });
        },

        /**
         * 上传图片
         */
        fnUploadImageOfCustomerLogo(e) {
            this.fnUploadImage(e, (resp) => {
                this.qrcode = resp.data.url;
            }, (resp) => {
                console.log(resp.msg);
            });
        },

        fnUploadImage(e, success, error) {
            let timeTmp = new Date().getTime();
            let pic = new FormData();

            pic.append('file', e.file);
            this.$upload({
                url: '/__local/common%5Cupload',
                data: pic,
                success: resp => {
                    if (resp.code == 1) {
                        success(resp);
                    } else {
                        this.$message({
                            type: 'warning',
                            message: '上传图片失败',
                            center: true
                        });
                        error(resp);
                    }
                }
            });
        },
        handleRemove(file, fileList) {
            this.qrcode = '';
            document.querySelector('.container_form_preview .el-upload--picture-card').style.display = 'block';
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        }
    }
};
</script>

<style lang="less" scoped>
.container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .content {
        width: 100%;
        display: flex;
        flex-direction: column;
        flex: 1;
        background: #ffffff;
        align-items: center;
        padding-top: 20px;
        .container_title {
            width: 100%;
            color: #3F454B;
            font-size: 18px;
            font-weight: 500;
            height: 25px;
            line-height: 25px;
            margin: 30px auto;
            text-align: center;
        }
        .container_desc {
            width: 1080px;
            line-height: 23px;
            color: #88909C;
            font-size: 14px;
            margin-bottom: 20px;
            text-align: center;
        }
        .container_seat {
            width: 100%;
            height: 1px;
            background: #F4F4F4;
            margin-bottom: 30px;
        }
        .content_main {
           display: flex;
           flex-direction: column;
           align-items: center;
           .content_text_list {
               margin-bottom: 30px;
           }
           .content_head {
               width: 1008px;
               height: 20px;
               line-height: 20px;
               color: #3F454B;
               font-size: 14px;
               margin-bottom: 10px;
               white-space: nowrap;
               overflow: hidden;
               text-overflow: ellipsis;
           }
           .content_radio_list {
               margin-bottom: 30px;
               width: 1008px;
               .content_radio {
                   display: flex;
                   flex-direction: column;
                   .content_radio_text {
                       height: 18px;
                       line-height: 18px;
                       margin-top: 15px;
                       width: 100%;
                       overflow: hidden;
                   }
                   .content_radio_input {
                       border: none;
                       outline: none;
                       border-bottom: 1px #DCDFE6 solid;
                       width: 100%;
                   }
                   .content_checbox_input {
                        border: none;
                        outline: none;
                        border-bottom: 1px #DCDFE6 solid;
                        width: 100%;
                        margin-left: 20px;
                   }
                   .content_raiod_other {
                       display: flex;
                       height: 18px;
                       margin-top: 15px;
                       .content_radio_text {
                           margin-top: 0px;
                       }
                   }
               }
           }
           .content_imglist {
               margin-bottom: 30px;
               width: 1008px;
           }
           .content_image {
               width: 146px;
               height: 146px;
           }
           .content_camera {
               width: 24px;
               height: 24px;
           }
           .content_camera_text {
               position: relative;
               top: -120px;
               font-size: 14px;
               color: #3F454B;
           }
        }
        .zd_msg {
            border: 1px solid #d8dce5;
            padding: 15px;
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            width: 1008px;
            .zd_msg_text {
                font-size: 14px;
                color: #606266;
                margin-right: 10px;
                white-space: nowrap;
            }
        }
        .el_back_foot {
            margin: 40px auto;

        }
    }
    .form_fixed {
        position: fixed;
        z-index: 10;
    }
}
</style>

<style>
.container_form_preview .el-upload--picture-card {
    background: #F4F4F4 !important;
}
.el-upload-list--picture-card .el-upload-list__item {
    margin: 0 20px 8px 0 !important;
}
/* 全局header样式设置... 我这里权重最大 */
.container .header {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
}
</style>